<template>
    <div id="Login">
      Administrator
    </div>
  
    <el-input
      v-model="username"
      placeholder="Input Account"
      :clearable=true
      maxlength="20"
      size="large"
      :prefix-icon="User"
      class="BOX_input"
    ></el-input>
  
    <el-input
      v-model="password"
      placeholder="Input Password"
      type="password"
      :show-password=true
      size="large"
      :prefix-icon="Lock"
      class="BOX_input"
    ></el-input>
  
    <div id="cutLine"></div>
  
    <el-button
      type="primary"
      class="BOX_button"
      @click="click"
    >Add Account</el-button>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { ElMessage } from "element-plus";
  import { addAccount } from "../../api/api";
  
  const username = ref("");
  const password = ref("");
  
  async function click() {
    // 输入检测
    if (username.value == "") {
      ElMessage.error("Please input ACCOUNT");
      return;
    } else if (password.value == "") {
      ElMessage.error("Please input PASSWORD");
      return;
    }
  
    // 登录
    const responseCode = await addAccount(username.value, password.value);
    // console.log(res);
    // 注册失败
    if (responseCode == 0) {
      ElMessage.error("fail");
      return;
    }
    // 注册成功
    else if (responseCode == 1) {
      // 检测路由是否跳转成功
      ElMessage.success('success')
    }
  }
  </script>
  
  <style scoped>
  #Login {
    width: 80%;
    font-weight: 1000;
    font-size: large;
    color: white;
  }
  #cutLine {
    width: 90%;
    height: 1px;
    background-color: gray;
    top: 10px;
  }
  .BOX_input {
    width: 80%;
    margin: 10px;
  }
  .BOX_button {
    width: 80%;
    margin: 40px;
  }
  </style>